/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
 //对象用{}，数组用[],它们之间还是有差别的！！！
var aqiData = {};


function validate(city, aqi){
	var regCity = /^[A-Za-z\u4e00-\u9fa5]{0,}$/;
    var regAqi = /^[0-9]{0,}$/;
    if (city ==""||!regCity.test(city)) {
    	 alert("城市名必须为中英文字符");
    	return false;
     }else if (aqi == ""||!regAqi.test(aqi)) {
     	alert("空气质量指数必须为整数");
    	return false;
    }else {
    	document.getElementById("aqi-city-input").value = "";
    	document.getElementById("aqi-value-input").value = "";
    	return true;
    }
}

function isEmptyObject(obj){
    for(var k in obj){return false} 
    return true; 
} 

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
	var aqiCityInput = document.getElementById("aqi-city-input").value;
	var aqiValueInput = document.getElementById("aqi-value-input").value;
	if(validate(aqiCityInput, aqiValueInput)) {
		aqiData[aqiCityInput] = aqiValueInput;
		//aqiData.push([aqiCityInput, aqiValueInput]);
	}
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
	var aqiTable = document.getElementById("aqi-table");
	if(isEmptyObject(aqiData)) {
		aqiTable.innerHTML = "";
	}else {
		aqiTable.innerHTML = "<tr><th>城市</th><th>空气质量</th><th>操作</th></tr>";
	}
	for(k in aqiData) {
		var tr = document.createElement("tr");
		var button = document.createElement("button");
		var del = document.createTextNode("删除");
		button.appendChild(del);
		button.onclick = function() {
			delBtnHandle(k);
		}
		var city = document.createTextNode(k);
		var aqi = document.createTextNode(aqiData[k]);
		var cityTd = document.createElement("td");
		var aqiTd = document.createElement("td");
		cityTd.appendChild(city);
		aqiTd.appendChild(aqi)
		var buttonTd = document.createElement("td").appendChild(button);
		tr.appendChild(cityTd);
		tr.appendChild(aqiTd);
		tr.appendChild(buttonTd);
		aqiTable.appendChild(tr);
	}
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(key) {
  delete aqiData[key];
  renderAqiList();
}

function init() {
  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
	var addBtn = document.getElementById("add-btn");
	addBtn.addEventListener("click", addBtnHandle);
}

init();
